<template>
	<view class="content">
		<view class="header">
			<p class="title">我的</p>
			<view class="mark">
				<image src="../../static/icon_kc@2x.png" mode=""></image>
				<p class="mark_text">映射矿池</p>
			</view>
			<view class="personalAll">
				<view class="personal">
					<view class="imgs">
						<image :src="imgs" mode=""></image>
					</view>
					<view class="personal_text">
						<p class="text_3">{{user.nickname}}</p>
						<p class="text_4">邀请码：{{user.invite_code}}</p>
					</view>
				</view>
				<view class="icon" @click="jump">
					<image src="../../static/next2.png"></image>
				</view>
			</view>
			<view class="text_5">
				流通资产估值（USDT)
			</view>
			<view class="text_6">
				<span class="balance">0.00000</span>
				≈0.0000CNY
			</view>
			<view class="FIL" @click="backprofit">
				<image src="../../static/icon_syq@2x.png"></image>
				<text class="text_1">收益区</text>
				<image src="../../static/next.png" mode=""></image>
			</view>
		</view>
		<view class="share">
			<u-mask :show="show" @click="show = false">
				<view class="warp">
					<image class="warp_img" src="../../static/img@2x.png" mode="widthFix"></image>
					<image class="warp_ewm" src="http://shedehui.club/api/Qrcode/image?content=http://shedehui.club/api/Qrcode/download&size=134"></image>
				</view>
			</u-mask>
			<image src="../../static/true.jpg" @click="gustt"></image>
		</view>
		<view class="assets">
			<view class="assets_title">
				资产
			</view>
			<!-- <view class="assets_list">
				<view class="list1">
					<view class="name">
						<image src="../../static/icon_x@2x.png"></image>
						<span class="name_text1">XRP</span>
						<span class="name_text2">≈0.00000000USDT</span>
					</view>
					<view class="details">
						<view class="details_left">
							<span class="details_text1">可用</span>
							<span class="details_text2">0.00000000</span>
						</view>
						<view class="details_right">
							<span class="details_text3">冻结</span>
							<span class="details_text4">0.00000000</span>
						</view>
					</view>
					<view class="xian">
						
					</view>
				</view>
				<view class="list2">
					<view class="money1">
						<image src="../../static/icon_jlz@2x.png" mode=""></image>
						<view class="money1_text">记录</view>
					</view>
				</view>
			</view> -->
			<view class="assets_list" v-for="(item, key) in wallet" :key="key">
				<view class="list1">
					<view class="name">
						<image src="../../static/icon_x@2x.png"></image>
						<span class="name_text1">{{item.coin_name}}</span>
						<span class="name_text2">≈0.00000000USDT</span>
					</view>
					<view class="details">
						<view class="details_left">
							<span class="details_text1">可用</span>
							<span class="details_text2">{{item.thaw_num}}</span>
						</view>
						<view class="details_right">
							<span class="details_text3">冻结</span>
							<span class="details_text4">{{item.frozen_num}}</span>
						</view>
					</view>
					<view class="xian">
						
					</view>
				</view>
				<view class="list2">
					<view class="money1" @click="recharge(item.coin_type_id)">
						<image src="../../static/icon_jlh@2x.png" mode=""></image>
						<view class="money1_text">充币</view>
					</view>
					<view class="money1" @click="withdrawal(item.coin_type_id)">
						<image src="../../static/icon_jll@2x.png" mode=""></image>
						<view class="money1_text">提币</view>
					</view>
					<view class="money1" @click="record">
						<image src="../../static/icon_jlz@2x.png" mode=""></image>
						<view class="money1_text">记录</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bai">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '我的',
				user:{},
				imgs:"",
				wallet:[],
				show: false,
				content:false
			}
		},
		onLoad() {

		},onShow() {
			this.initData()
			this.userInfo()
		},
		methods: {
			//获取Token
			initData(){
				if(this.$db.get('userToken')){
					console.log(this.$db.get('userToken'))
				}else{
					this.$db.userToken()
				}
			},
			userInfo(){
				this.$api.userInfo().then(res=>{
					// console.log(res)
					this.user=res.data.data
					if(!res.data.data.avatar){
						this.imgs="../../static/icon_tx@2x.png"
					}else{
						this.imgs=res.data.data.avatar
					}
					
					// if(res.data.code=='-14'){
					// 	this.$common.successToShow(res.data.msg,()=>{})
					// 	uni.navigateTo({
					// 		url:'../login/login/index'
					// 	})
					// }
				}, err => {
					
				})
				
				let data={
					coin_type_ids:''
				}
				this.$api.wallet(data).then(res=>{
					this.wallet=res.data.data
				}, err => {})
			},
			jump(){
				uni.navigateTo({
					url:'./personal'
				})
			},
			recharge(id){
				uni.navigateTo({
					url:'./operation/recharge?id='+id
				})
			},
			withdrawal(id){
				uni.navigateTo({
					url:'./operation/withdrawal?id='+id
				})
			},
			backprofit(){
				// console.log(123)
				uni.switchTab({
					url:"../profit/index"
				})
			},
			gustt(){
				this.show=true
			},
			record(){
				uni.showToast({
					title:"暂无记录",
					icon:"none"
				})
			}
		}
	}
</script>

<style lang="less">
	.warp {
		height: 100%;
		
		.warp_img{
			margin-top: 200rpx;
			width: 100%;
		}
		.warp_ewm{
			// position: absolute;
			// z-index: 999;
			top: -600rpx;
			width: 400rpx !important;
			height: 400rpx !important;
			left: 180rpx;
		}
	}
	.content{
		width: 100%;
		background: #f3f3f3;
		.bai{
			width: 100%;
			height: 400rpx;
		}
		.header {
			// width: 750rpx;
			height: 540rpx;
			background: #764CFA;
			opacity: 1;
			padding: 0 20rpx;
			.title {
				line-height: 200rpx;
				color: #FFFFFC;
				font-size: 36rpx;
				background: #764CFA;
				font-family: PingFang SC;
				font-weight: 400;
				width: 100%;
				display:inline;
				margin-left: 320rpx;
			}
			.mark{
				width: 100rpx;
				height: 80rpx;
				float: right;
				margin-top: 64rpx;
				text-align: center;
				image{
					width: 26px;
					height: 22px;
					opacity: 1;
				}
				.mark_text{
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}
			.personalAll{
				display: flex;
				justify-content:space-between;
			}
			.personal{
				height: 120rpx;
				padding: 0 0 0 32rpx;
				width: 100%;
				display: flex;
				.imgs{
					width: 120rpx;
					height: 120rpx;
					image{
						width: 120rpx;
						height: 120rpx;
					}
				}
				.personal_text{
					padding: 10rpx 32rpx;
					.text_3{
						font-size: 36rpx;
						color: #FFFFFC;
					}
					.text_4{
						font-size: 28rpx;
						color: #FFFFFC;
					}
				}
			}
			.icon{
				height: 120rpx;
				line-height: 120rpx;
				float: right;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.text_5{
				padding: 0 0 0 32rpx;
				font-size: 28rpx;
				color: #FFFFFC;
				margin-top: 40rpx;
			}
			.text_6{
				padding: 0 0 0 32rpx;
				font-size: 28rpx;
				color: #FFFFFC;
				margin-top: 8rpx;
				.balance{
					font-size: 40rpx;
					font-weight: bold;
				}
			}
			.FIL {
				height: 112rpx;
				background: #FFFFFC;
				opacity: 1;
				border-radius: 16rpx;
				display: flex;
				align-items:center;
				justify-content:space-between;
				border-bottom: 1px solid #F2F1F5;
				padding: 0 34rpx;
				margin-top: 26rpx;
				image {
					width: 48rpx;
					height: 48rpx;
				}
				
				.text_1 {
					width: 20%;
					font-size: 32rpx;
					color: #000000;
					margin-right: auto;
					margin-left: 20rpx;
					font-weight: bold;
				}
			}
		}
		.share{
			margin-top: 100rpx;
			image{
				width: 100%;
				height: 200rpx;
			}
		}
		.assets{
			margin-top: 50rpx;
			padding: 0 20rpx;
			height: 600rpx;
			.assets_title{
				height: 32rpx;
				border-left: 3px solid #4104B7;
				font-size: 40rpx;
				color: #333333;
				font-weight: bold;
				line-height: 32rpx;
				padding-left: 14rpx;
			}
			.assets_list{
				margin-top: 20rpx;
				height: 282rpx;
				background: #FFFFFC;
				opacity: 1;
				border-radius: 8px;
				padding: 30rpx 20rpx 22rpx 20rpx;
				.list1{
					.name{
						color: #000000;
						font-weight: bold;
						image{
							width: 46rpx;
							height: 38rpx;
						}
						.name_text1{
							margin-left: 10rpx;
							font-size: 36rpx;
						}
						.name_text2{
							float: right;
						}
					}
					.details{
						margin-top: 30rpx;
						font-weight: bold;
						display: flex;
						justify-content:space-between;
						.details_left{
							.details_text1{
								font-size: 32rpx;
								color: #999999;
							}
							.details_text2{
								font-size: 32rpx;
								color: #000000;
							}
						}
						
						.details_right{
							.details_text4{
								font-size: 32rpx;
								color: #000000;
							}
							.details_text3{
								font-size: 32rpx;
								color: #999999;
							}
						}
						
					}
					.xian{
						margin-top: 40rpx;
						height: 0px;
						border: 1px solid #F2F1F5;
						opacity: 1;
					}
				}
				.list2{
					margin-top: 24rpx;
					display: flex;
					justify-content:space-between;
					.money1{
						height: 56rpx;
						display: flex;
						image{
							width: 56rpx;
							height: 56rpx;
						}
						.money1_text{
							font-size: 36rpx;
							color: #000000;
							font-weight: bold;
							line-height:56rpx;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
